<div class="widgets">

    <div class="row">
        <div class="col-md-12">
            <div ba-panel ba-panel-title="Form Wizard" ba-panel-class="with-scroll">
                <ba-wizard>
                    <ba-wizard-step title="Personal info" form="vm.personalInfoForm">
                        <form name="vm.personalInfoForm" novalidate>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group has-feedback"
                                         ng-class="{'has-error': vm.personalInfoForm.username.$invalid && (vm.personalInfoForm.username.$dirty || vm.personalInfoForm.$submitted)}">
                                        <label for="exampleUsername1">Username</label>
                                        <input type="text" class="form-control" id="exampleUsername1" name="username" placeholder="Username" ng-model="vm.personalInfo.username" required>
                                        <span class="help-block error-block basic-block">Required</span>
                                    </div>
                                    <div class="form-group" ng-class="{'has-error': vm.personalInfoForm.email.$invalid && (vm.personalInfoForm.email.$dirty || vm.personalInfoForm.$submitted)}">
                                        <label for="exampleInputEmail1">Email address</label>
                                        <input type="email" class="form-control" id="exampleInputEmail1" name="email" placeholder="Email" ng-model="vm.personalInfo.email" required>
                                        <span class="help-block error-block basic-block">Proper email required</span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group" ng-class="{'has-error': vm.personalInfoForm.password.$invalid && (vm.personalInfoForm.password.$dirty || vm.personalInfoForm.$submitted)}">
                                        <label for="exampleInputPassword1">Password</label>
                                        <input type="password" class="form-control" id="exampleInputPassword1" name="password" placeholder="Password" ng-model="vm.personalInfo.password" required>
                                        <span class="help-block error-block basic-block">Required</span>
                                    </div>
                                    <div class="form-group"  ng-class="{'has-error': !vm.arePersonalInfoPasswordsEqual() && (vm.personalInfoForm.confirmPassword.$dirty || vm.personalInfoForm.$submitted)}">
                                        <label for="exampleInputConfirmPassword1">Confirm Password</label>
                                        <input type="password" class="form-control" id="exampleInputConfirmPassword1" name="confirmPassword" placeholder="Confirm Password" ng-model="vm.personalInfo.confirmPassword" required>
                                        <span class="help-block error-block basic-block">Passwords should match</span>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </ba-wizard-step>
                    <ba-wizard-step title="Product Info" form="vm.productInfoForm">
                        <form name="vm.productInfoForm" novalidate>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group has-feedback"
                                         ng-class="{'has-error': vm.productInfoForm.productName.$invalid && (vm.productInfoForm.productName.$dirty || vm.productInfoForm.$submitted)}">
                                        <label for="productName">Product name</label>
                                        <input type="text" class="form-control" id="productName" name="productName" placeholder="Product name" ng-model="vm.productInfo.productName" required>
                                        <span class="help-block error-block basic-block">Required</span>
                                    </div>
                                    <div class="form-group" ng-class="{'has-error': vm.productInfoForm.productId.$invalid && (vm.productInfoForm.productId.$dirty || vm.productInfoForm.$submitted)}">
                                        <label for="productId">Product id</label>
                                        <input type="text" class="form-control" id="productId" name="productId" placeholder="productId" ng-model="vm.productInfo.productId" required>
                                        <span class="help-block error-block basic-block">Required</span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="productName">Category</label>
                                        <select class="form-control" title="Category" selectpicker>
                                            <option selected>Electronics</option>
                                            <option>Toys</option>
                                            <option>Accessories</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </ba-wizard-step>
                    <ba-wizard-step title="Shipment"  form="vm.addressForm">
                        <form name="vm.addressForm" novalidate>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group has-feedback"
                                         ng-class="{'has-error': vm.addressForm.address.$invalid && (vm.addressForm.address.$dirty || vm.addressForm.$submitted)}">
                                        <label for="productName">Shipment address</label>
                                        <input type="text" class="form-control" id="address" name="address" placeholder="Shipment address" ng-model="vm.shipment.address" required>
                                        <span class="help-block error-block basic-block">Required</span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="productName">Shipment method</label>
                                        <select class="form-control" title="Category" selectpicker>
                                            <option selected>Fast & expensive</option>
                                            <option>Cheap & free</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="checkbox">
                                <label class="custom-checkbox">
                                    <input type="checkbox">
                                    <span>Save shipment info</span>
                                </label>
                            </div>
                        </form>
                    </ba-wizard-step>
                    <ba-wizard-step title="Finish">
                        <form class="form-horizontal" name="vm.finishForm" novalidate>
                            Congratulations! You have successfully filled the form!
                        </form>
                    </ba-wizard-step>
                </ba-wizard>
            </div>
        </div>
    </div>

</div>